<template>
  <div class="ranking-container">
    <h2 class="ranking-title">排行榜</h2>

    <div class="ranking-row">
      <el-row :gutter="15">
        <!-- 火爆新品 -->
        <el-col :span="8" class="ranking-col">
          <div class="ranking-card bg1">
            <div class="category-header">
              <h3 class="category-title">火爆新品</h3>
            </div>
            <div class="category-content">
              <el-popover popper-class="game-popover" placement="right-start" :width="398" trigger="manual"
                :show-arrow="false" v-model:visible="popoverVisible['hotNewArray']"
                @show="handlePopoverShow('hotNewArray', hotNewProductsArray.videoUrl)"
                @hide="handlePopoverHide('hotNewArray')">
                <!-- 自定义内容插槽 -->
                <div class="popover-content" @mouseenter="hidePopover('hotNewArray')">
                  <!-- 条件显示视频或图片 -->
                  <video v-if="hotNewProductsArray.videoUrl" :ref="el => el && (videoElements['hotNewArray'] = el)"
                    :src="hotNewProductsArray.videoUrl" class="popover-img" loop muted playsinline
                    preload="auto"></video>
                  <img v-else :src="hotNewProductsArray.coverUrl" :alt="hotNewProductsArray.title" class="popover-img">
                  <div class="popover-info">
                    <h4 class="popover-title">{{ hotNewProductsArray.title }}</h4>
                    <p class="popover-slogan">{{ hotNewProductsArray.slogan }}</p>
                    <div class="game-stats" v-if="hotNewProductsArray.tags && hotNewProductsArray.tags.length > 0">
                      <div v-for="tag in hotNewProductsArray.tags" :key="tag">
                        <el-tag class="stat-item" type="info">{{ tag.name }}</el-tag>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 触发元素插槽 -->
                <template #reference>
                  <div class="top-game" @mouseenter="showPopover('hotNewArray')"
                    @mouseleave="handleReferenceMouseLeave('hotNewArray')"
                    @click="navigateToGameDetail(hotNewProductsArray)">
                    <img class="top-icon" src="@/assets/images/top1-icon.png" alt="">
                    <img :src="hotNewProductsArray.coverUrl" :alt="hotNewProductsArray.title" class="top-game-img">
                    <h4 class="top-game-title">{{ hotNewProductsArray.title }}</h4>
                    <p class="top-game-subtitle">{{ hotNewProductsArray.slogan }}</p>
                  </div>
                </template>
              </el-popover>

              <ul class="game-list">
                <li v-for="(game, index) in hotNewProducts" :key="index" @click="navigateToGameDetail(game)">
                  <el-popover popper-class="game-popover" placement="right-start" :width="398" trigger="manual"
                    :show-arrow="false" v-model:visible="popoverVisible[getVideoId('hotNew', index)]"
                    @show="handlePopoverShow(getVideoId('hotNew', index), game.videoUrl)"
                    @hide="handlePopoverHide(getVideoId('hotNew', index))">
                    <!-- 自定义内容插槽 -->
                    <div class="popover-content" @mouseenter="hidePopover(getVideoId('hotNew', index))">
                      <!-- 条件显示视频或图片 -->
                      <video v-if="game.videoUrl" :ref="el => el && (videoElements[getVideoId('hotNew', index)] = el)"
                        :src="game.videoUrl" class="popover-img" loop muted playsinline preload="auto"></video>
                      <img v-else :src="game.coverUrl" :alt="game.title" class="popover-img">
                      <div class="popover-info">
                        <h4 class="popover-title">{{ game.title }}</h4>
                        <p class="popover-slogan">{{ game.slogan }}</p>
                        <div class="game-stats" v-if="game.tags && game.tags.length > 0">
                          <div v-for="tag in game.tags" :key="tag">
                            <el-tag class="stat-item" type="info">{{ tag.name }}</el-tag>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 触发元素插槽 -->
                    <template #reference>
                      <div class="game-item" @mouseenter="showPopover(getVideoId('hotNew', index))"
                        @mouseleave="handleReferenceMouseLeave(getVideoId('hotNew', index))">
                        <div class="item-position">{{ index + 2 }}</div>
                        <img :src="game.iconUrl" :alt="game.title" class="item-img">
                        <div class="item-info">
                          <p class="item-title">{{ game.title }}</p>
                          <p class="item-desc">{{ game.slogan }}</p>
                        </div>
                      </div>
                    </template>
                  </el-popover>
                </li>
              </ul>
            </div>
          </div>
        </el-col>

        <!-- 本周最热 -->
        <el-col :span="8" class="ranking-col">
          <div class="ranking-card bg2">
            <div class="category-header">
              <h3 class="category-title">本周最热</h3>
            </div>

            <div class="category-content">
              <el-popover popper-class="game-popover" placement="right-start" :width="398" trigger="manual"
                :show-arrow="false" v-model:visible="popoverVisible['hottestWeekArray']"
                @show="handlePopoverShow('hottestWeekArray', hottestThisWeekArray.videoUrl)"
                @hide="handlePopoverHide('hottestWeekArray')">
                <!-- 自定义内容插槽 -->
                <div class="popover-content" @mouseenter="hidePopover('hottestWeekArray')">
                  <!-- 条件显示视频或图片 -->
                  <video v-if="hottestThisWeekArray.videoUrl"
                    :ref="el => el && (videoElements['hottestWeekArray'] = el)" :src="hottestThisWeekArray.videoUrl"
                    class="popover-img" loop muted playsinline preload="auto"></video>
                  <img v-else :src="hottestThisWeekArray.coverUrl" :alt="hottestThisWeekArray.title"
                    class="popover-img">
                  <div class="popover-info">
                    <h4 class="popover-title">{{ hottestThisWeekArray.title }}</h4>
                    <p class="popover-slogan">{{ hottestThisWeekArray.slogan }}</p>
                    <div class="game-stats" v-if="hottestThisWeekArray.tags && hottestThisWeekArray.tags.length > 0">
                      <div v-for="tag in hottestThisWeekArray.tags" :key="tag">
                        <el-tag class="stat-item" type="info">{{ tag.name }}</el-tag>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 触发元素插槽 -->
                <template #reference>
                  <div class="top-game" @mouseenter="showPopover('hottestWeekArray')"
                    @mouseleave="handleReferenceMouseLeave('hottestWeekArray')"
                    @click="navigateToGameDetail(hottestThisWeekArray)">
                    <img class="top-icon" src="@/assets/images/top1-icon.png" alt="">
                    <img :src="hottestThisWeekArray.coverUrl" :alt="hottestThisWeekArray.title" class="top-game-img">
                    <h4 class="top-game-title">{{ hottestThisWeekArray.title }}</h4>
                    <p class="top-game-subtitle">{{ hottestThisWeekArray.slogan }}</p>
                  </div>
                </template>
              </el-popover>

              <ul class="game-list">
                <li v-for="(game, index) in hottestThisWeek" :key="index" @click="navigateToGameDetail(game)">
                  <el-popover popper-class="game-popover" placement="right-start" :width="398" trigger="manual"
                    :show-arrow="false" v-model:visible="popoverVisible[getVideoId('hottestWeek', index)]"
                    @show="handlePopoverShow(getVideoId('hottestWeek', index), game.videoUrl)"
                    @hide="handlePopoverHide(getVideoId('hottestWeek', index))">
                    <!-- 自定义内容插槽 -->
                    <div class="popover-content" @mouseenter="hidePopover(getVideoId('hottestWeek', index))">
                      <!-- 条件显示视频或图片 -->
                      <video v-if="game.videoUrl"
                        :ref="el => el && (videoElements[getVideoId('hottestWeek', index)] = el)" :src="game.videoUrl"
                        class="popover-img" loop muted playsinline preload="auto"></video>
                      <img v-else :src="game.coverUrl" :alt="game.title" class="popover-img">
                      <div class="popover-info">
                        <h4 class="popover-title">{{ game.title }}</h4>
                        <p class="popover-slogan">{{ game.slogan }}</p>
                        <div class="game-stats" v-if="game.tags && game.tags.length > 0">
                          <div v-for="tag in game.tags" :key="tag">
                            <el-tag class="stat-item" type="info">{{ tag.name }}</el-tag>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 触发元素插槽 -->
                    <template #reference>
                      <div class="game-item" @mouseenter="showPopover(getVideoId('hottestWeek', index))"
                        @mouseleave="handleReferenceMouseLeave(getVideoId('hottestWeek', index))">
                        <div class="item-position">{{ index + 2 }}</div>
                        <img :src="game.iconUrl" :alt="game.title" class="item-img">
                        <div class="item-info">
                          <p class="item-title">{{ game.title }}</p>
                          <p class="item-desc">{{ game.slogan }}</p>
                        </div>
                      </div>
                    </template>
                  </el-popover>
                </li>
              </ul>
            </div>
          </div>
        </el-col>

        <!-- 角色扮演 -->
        <el-col :span="8" class="ranking-col">
          <div class="ranking-card bg3">
            <div class="category-header">
              <h3 class="category-title">【免账号专区】</h3>
            </div>

            <div class="category-content">
              <el-popover popper-class="game-popover" placement="right-start" :width="398" trigger="manual"
                :show-arrow="false" v-model:visible="popoverVisible['rolePlayingArray']"
                @show="handlePopoverShow('rolePlayingArray', rolePlayingArray.videoUrl)"
                @hide="handlePopoverHide('rolePlayingArray')">
                <!-- 自定义内容插槽 -->
                <div class="popover-content" @mouseenter="hidePopover('rolePlayingArray')">
                  <!-- 条件显示视频或图片 -->
                  <video v-if="rolePlayingArray.videoUrl" :ref="el => el && (videoElements['rolePlayingArray'] = el)"
                    :src="rolePlayingArray.videoUrl" class="popover-img" loop muted playsinline preload="auto"></video>
                  <img v-else :src="rolePlayingArray.coverUrl" :alt="rolePlayingArray.title" class="popover-img">
                  <div class="popover-info">
                    <h4 class="popover-title">{{ rolePlayingArray.title }}</h4>
                    <p class="popover-slogan">{{ rolePlayingArray.slogan }}</p>
                    <div class="game-stats" v-if="rolePlayingArray.tags && rolePlayingArray.tags.length > 0">
                      <div v-for="tag in rolePlayingArray.tags" :key="tag">
                        <el-tag class="stat-item" type="info">{{ tag.name }}</el-tag>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 触发元素插槽 -->
                <template #reference>
                  <div class="top-game" @mouseenter="showPopover('rolePlayingArray')"
                    @mouseleave="handleReferenceMouseLeave('rolePlayingArray')"
                    @click="navigateToGameDetail(rolePlayingArray)">
                    <img class="top-icon" src="@/assets/images/top1-icon.png" alt="">
                    <img :src="rolePlayingArray.coverUrl" :alt="rolePlayingArray.title" class="top-game-img">
                    <h4 class="top-game-title">{{ rolePlayingArray.title }}</h4>
                    <p class="top-game-subtitle">{{ rolePlayingArray.slogan }}</p>
                  </div>
                </template>
              </el-popover>

              <ul class="game-list">
                <li v-for="(game, index) in rolePlaying" :key="index" class="game-item"
                  @click="navigateToGameDetail(game)">

                  <el-popover popper-class="game-popover" placement="right-start" :width="398" trigger="manual"
                    :show-arrow="false" v-model:visible="popoverVisible[getVideoId('rolePlaying', index)]"
                    @show="handlePopoverShow(getVideoId('rolePlaying', index), game.videoUrl)"
                    @hide="handlePopoverHide(getVideoId('rolePlaying', index))">
                    <!-- 自定义内容插槽 -->
                    <div class="popover-content" @mouseenter="hidePopover(getVideoId('rolePlaying', index))">
                      <!-- 条件显示视频或图片 -->
                      <video v-if="game.videoUrl"
                        :ref="el => el && (videoElements[getVideoId('rolePlaying', index)] = el)" :src="game.videoUrl"
                        class="popover-img" loop muted playsinline preload="auto"></video>
                      <img v-else :src="game.coverUrl" :alt="game.title" class="popover-img">
                      <div class="popover-info">
                        <h4 class="popover-title">{{ game.title }}</h4>
                        <p class="popover-slogan">{{ game.slogan }}</p>
                        <div class="game-stats" v-if="game.tags && game.tags.length > 0">
                          <div v-for="tag in game.tags" :key="tag">
                            <el-tag class="stat-item" type="info">{{ tag.name }}</el-tag>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 触发元素插槽 -->
                    <template #reference>
                      <div class="game-item" @mouseenter="showPopover(getVideoId('rolePlaying', index))"
                        @mouseleave="handleReferenceMouseLeave(getVideoId('rolePlaying', index))">
                        <div class="item-position">{{ index + 2 }}</div>
                        <img :src="game.iconUrl" :alt="game.title" class="item-img">
                        <div class="item-info">
                          <p class="item-title">{{ game.title }}</p>
                          <p class="item-desc">{{ game.slogan }}</p>
                        </div>
                      </div>
                    </template>
                  </el-popover>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBanner, getHomeLayout, getGameNew, getWeekHot, getFreeAccount } from '@/api';

// 视频元素引用
const videoElements = ref({});
// 弹窗显示状态管理
const popoverVisible = ref({});

// 处理视频播放
const handlePopoverShow = (videoId, videoUrl) => {
  if (videoUrl && videoElements.value[videoId]) {
    videoElements.value[videoId].play().catch(e => console.log('Video play error:', e));
  }
};

// 处理视频暂停
const handlePopoverHide = (videoId) => {
  if (videoElements.value[videoId]) {
    videoElements.value[videoId].pause();
  }
};

// 生成唯一的视频ID
const getVideoId = (prefix, index) => {
  return `${prefix}-video-${index}`;
};

// 显示弹窗
const showPopover = (id) => {
  popoverVisible.value[id] = true;
};

// 隐藏弹窗
const hidePopover = (id) => {
  popoverVisible.value[id] = false;
};

// 处理引用元素的鼠标离开事件
const handleReferenceMouseLeave = (id) => {
  // 延迟隐藏，防止快速移动时闪烁
  setTimeout(() => {
    hidePopover(id);
  }, 100);
};

const route = useRoute()
const router = useRouter()

// 火爆新品数据
const hotNewProductsArray = ref({})
const hotNewProducts = ref([])

// 本周最热数据
const hottestThisWeekArray = ref({})
const hottestThisWeek = ref([])

// 角色扮演数据
const rolePlayingArray = ref({})
const rolePlaying = ref([])

onMounted(() => {
  let params = {
    "page": 1,
    "rows": 5
  }
  getGameNew(params).then(res => {
    let games = res.games || []
    if (games.length) {
      hotNewProductsArray.value = games[0];
      hotNewProducts.value = games.slice(1, 5);
    }
  })
  getWeekHot(params).then(res => {
    let games = res.games || []
    if (games.length) {
      hottestThisWeekArray.value = games[0];
      hottestThisWeek.value = games.slice(1, 5);
    }
  })
  getFreeAccount(params).then(res => {
    let games = res.games || []
    if (games.length) {
      rolePlayingArray.value = games[0];
      rolePlaying.value = games.slice(1, 5);
    }
  })
})
const navigateToGameDetail = (item) => {
  router.push({
    path: `/cloudGaming/detail/${item.id}`,
  })
}
</script>

<style lang="scss" scoped>
$primary-color: #ffffff;
$secondary-color: #949495;
$background-color: #1a1c1e;
$border-color: #33363b;
$border-radius: 4px;

.ranking-container {
  margin-top: 30px;

  .ranking-title {
    font-size: 24px;
    font-weight: 600;
    color: $primary-color;
    margin: 0 0 20px 0;
  }

  .ranking-row {
    width: 100%;

    .ranking-col {
      .ranking-card {
        background-color: $background-color;
        border-radius: $border-radius;
        overflow: hidden;
        height: 100%;
        border: 1px solid $border-color;

        .category-header {
          padding: 12px 16px;

          .category-title {
            font-size: 18px;
            font-weight: 600;
            color: $primary-color;
            margin: 0;
          }
        }

        .category-content {
          padding: 16px 0;

          .top-game {
            margin-bottom: 16px;
            position: relative;
            cursor: pointer;
            padding: 0 16px;

            .top-icon {
              width: 38px;
              height: 45px;
              position: absolute;
              top: -8px;
              left: 8px;
            }

            .top-game-img {
              width: 100%;
              height: 160px;
              object-fit: cover;
              border-radius: $border-radius;
              margin-bottom: 8px;
              border-radius: 4px;
            }

            .top-game-title {
              font-size: 16px;
              font-weight: 600;
              color: $primary-color;
              margin: 0 0 4px 0;
              transition: color 0.3s ease;
            }

            .top-game-title:hover {
              color: #ffe500;
            }

            .top-game-subtitle {
              font-size: 12px;
              color: $secondary-color;
              margin: 0;
            }
          }

          .game-list {
            list-style: none;
            padding: 0 8px;
            margin: 0;
            li:hover {
              border-radius: 4px;
              background: rgba(255, 255, 255, 0.05);
            }

            .game-item {
              display: flex;
              align-items: center;
              padding: 8px 8px;
              cursor: pointer;


              &:last-child {
                border-bottom: none;
              }

              .item-position {
                height: 24px;
                line-height: 24px;
                text-align: center;
                font-size: 12px;
                font-weight: 600;
                color: $secondary-color;
                margin-right: 8px;
              }

              .item-img {
                width: 90px;
                height: 50px;
                object-fit: cover;
                border-radius: $border-radius;
                margin-right: 6px;
              }

              .item-info {
                flex: 1;
                min-width: 0;

                .item-title {
                  font-size: 14px;
                  color: $primary-color;
                  margin: 0 0 4px 0;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .item-desc {
                  font-size: 12px;
                  color: $secondary-color;
                  margin: 0;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }

      & .bg1 {
        background: url('@/assets/images/bg1.png') no-repeat;
        background-size: cover;
      }

      & .bg2 {
        background: url('@/assets/images/bg2.png') no-repeat;
        background-size: cover;
      }

      & .bg3 {
        background: url('@/assets/images/bg3.png') no-repeat;
        background-size: cover;
      }
    }
  }
}
</style>